<template>
	<view class="myloading">
		<view :class="myclass">
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			myclass: {
				type: String,
				default: 'loader'
			}
		}
	}
</script>

<style scoped>
.myloading{
	width: 100vw;
	height: 70vh;
	display: flex;
	justify-content: center;
	align-items: center;
}	
.loader,
.loader:before,
.loader:after {
  background: #cccccc;
  /*
  * load1：执行的动画名
  * 1s：执行一秒
  * infinite：执行无限次
  * ease-in-out：动画以低速开始和结束
  */
  animation: load1 0.8s infinite ease-in-out;
  width: 0.5rem;
  height: 1rem;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
}
.loader {
  text-indent: -9999em;
  margin: 40% auto;
  position: relative;
  font-size: 11px;
  /* 延时0.16s */
  animation-delay: 0.16s;
}
.loader:after {
  left: 1.5em;
  /* 延时0.32s */
  animation-delay: 0.32s;
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #CCCCCC;
    height: 2rem;
  }
  40% {
	/* 实现上部拉伸 */
    box-shadow: 0 -1rem #CCCCCC;
	/* 实现下部拉伸 */
    height: 1.5rem;
  }
}
</style>
